<template>
	<view class="w-100" :class="huichangBG">
		<view class="bg-f1 h-100vh">

			<view :style="'width: 90vw;'" class="huichang-bg" :class="huichangBGxiao">


				<!-- <movable-area :style="'height:auto;'+'width: 90vw;'" class="" :class="huichangBGxiao">
				<movable-view class="relate" :style="'width: 90vw;height:'+(seatRow*40+350)+'rpx;'" :inertia="true" :scale="true" :scale-min="0.95"
				 :scale-max="2" direction="all" @change="onMove" @scale="onScale"> -->
				<!-- <view class="Stage dp-f jc-c ai-c fz-22 color-333">
						5号厅
					</view> -->
				<!-- 虚拟桌子 -->
				<!-- <view class="wutai"></view> -->
				<view style="width: 550rpx;height: 243rpx;;margin-bottom: 60rpx;"
					class="m-0-a  dp-f jc-c ai-c fz-20 color-999  br-5" :class="'bg'+current+'-line'">舞台区域</view>
				<view class="pt-f pa-v-2 b-d-1" :style="'height:'+seatRow*(20+seatSize*pxNum)+'rpx;top:595rpx;width:0'">
				</view>
				<view v-for="(item,index) in seatArray" :key="index" class="dp-f jc-c mt-20"
					:style="'width:100%;height:'+seatSize+'px'">
					<view v-for="(seat,col) in item" :key="col" class="dp-ib"
						:style="'width:'+seatSize+'px;height:'+seatSize+'px'" @click="handleChooseSeat(index,col)">
						<image v-if="seat.type===0" class="w-100 h-100" src="../../static/unselected.png"
							mode="aspectFit"></image>
						<image v-else-if="seat.type===1" class="w-100 h-100" src="../../static/selected.png"
							mode="aspectFit"></image>
						<image v-else-if="seat.type===2" class="w-100 h-100" src="../../static/bought.png"
							mode="aspectFit"></image>
					</view>
				</view>
				<view class="pt-f  br-15 over-h" :style="'left: '+(24-moveX/scale)+'px;top:590rpx;width:20rpx;'"
					:class="'bg'+current+'-line'">
					<view class="    fz-22 color-fff teshudingyi"
						style="display: flex;flex-direction: column;justify-content: space-between;align-items: center;"
						:style="'height:'+(seatSize)+'px;'" v-for="(m,mindex) in mArr" :key="mindex">
						{{m}}
					</view>
					<!-- <view :style="'height: 20rpx;'"></view> -->
				</view>

				<!-- </movable-view>
			</movable-area> -->
				<!-- <view class="zuoweishuoming">
		
				</view> -->
				<text class="zuoweishuoming1" v-if="rongheshuoming">此分会场锁定登峰团队座位10个，炬火团队座位20个。</text>
				<view class="dp-f jc-c ai-c mb-20 fz-28" v-if="showTis" style="margin-top: 34rpx;">
					<view class="dp-f jc-c ai-c m-0-10">
						<image :style="'width:'+seatSize/2+'px;height:'+seatSize/2+'px'"
							src="../../static/unselected.png" mode="aspectFit"></image><span class="ml-10">可选</span>
					</view>
					<view class="dp-f jc-c ai-c m-0-10">
						<image :style="'width:'+seatSize/2+'px;height:'+seatSize/2+'px'" src="../../static/bought.png"
							mode="aspectFit"></image><span class="ml-10">不可选</span>
					</view>
					<view class="dp-f jc-c ai-c m-0-10">
						<image :style="'width:'+seatSize/2+'px;height:'+seatSize/2+'px'" src="../../static/selected.png"
							mode="aspectFit"></image><span class="ml-10">选中</span>
					</view>

				</view>
				<!-- <view class="bianshou-box" v-if="current==1">
					<view class="bianshou-bg" :class="bianshou?'bianshou1':'bianshou0'" @click="bianshouChange">

					</view>
				</view> -->
			</view>

			<view class="dp-f jc-c" style="margin-top: 38rpx;">
				<view class="back-btn" @click="fanhuihome">
					<image :src="'../../static/zhenying/'+current+'/home.png'" class="pic"></image>
				</view>
				<view class="back-btn" @click="buySeat">
					<image :src="'../../static/zhenying/'+current+'/join.png'" class="pic"></image>
				</view>
			</view>

			<!-- <view class="pt-f bottom-bar left-0 dp-f fd-cr z1000">
				<view class="bg-white p-all-32">
					
					<view class="dp-f ai-c fw-w fz-28 color-333 mb-20" v-if="SelectNum>0">
						<text>已选</text>
						<view class="p-all-10 b-1 br-5 dp-f ai-c jc-c fz-28 ml-20" v-for="(optItem,optindex) in optArr"
							:key="optindex">
							{{optItem.RowNum+'排'+optItem.ColumnNum+'座'}}
						</view>
					</view>
					<view style="width: 686rpx;height: 90rpx;" class="dp-f jc-c ai-c br-10 fz-34 color-fff"
						:class="SelectNum>0?bgBtn:bgUnbtn" @click="buySeat">
						{{SelectNum>0?'确认座位':'请选座位'}}
					</view>
				</view>
		
			</view> -->
		</view>

		<view class="piao-box" v-if="showPiao">
			<image :src="piaoSrc" style="width:668rpx; height:264rpx;margin-top: 678rpx;"></image>
			<view class="yaoqingpengyou" @click="yingjifen">

			</view>
		</view>
		<canvas canvas-id="canvas" id="canvas" style="width:668px; height:264px;" class="canvas-hide" />
	</view>
</template>

<script>
	import DrawPoster from '../../components/u-draw-poster/index.js'
	export default {
		data() {
			return {
				bianshou: false,
				piaoSrc: '',
				huichangBG: '',
				tuijianid: '',
				current: '',
				seatData: [],
				seatColl: '',
				huichangList: ['chuangxin', 'tuandui', 'zhuanye', 'zhunru'],
				showPiao: false,
				mark: false, //遮罩
				eData: {}, //传参来的数据
				scaleMin: 1, //h5端为解决1无法缩小问题，设为0.95
				boxWidth: 400, //屏幕宽度px
				space: ' ', //空格
				seatArray: [], //影院座位的二维数组,-1为非座位，0为未购座位，1为已选座位(绿色),2为已购座位(红色),一维行，二维列
				seatRow: 0, //影院座位行数
				seatCol: 0, //影院座位列数
				seatSize: 0, //座位尺寸
				SelectNum: 0, //选择座位数
				moveX: 0, //水平移动偏移量
				scale: 1, //放大倍数
				minRow: 0, //从第几行开始排座位
				minCol: 0, //从第几列开始排座位
				showTis: true, //显示选座提示
				seatList: [], //接口获取的原始位置
				mArr: [], //排数提示
				optArr: [], //选中的座位数组。
				isWXAPP: false,


				huichangBG: '', //分会场背景
				huichangBGxiao: '', //分会场白色背景板
				huichangTitle: '', //分会场标题
				huichangDate: '', //分会场日期
				bgBtn: '', //选座按钮激活状态
				bgUnbtn: '', //选座按钮没激活状态
				rongheshuoming: false, //融合共赢会场座位说明
			}
		},
		onLoad(e) {
			uni.showLoading({
				title: 'loading',
				mask: true
			})
			console.log(e)
			this.tuijianid = e.tuijianid

			this.current = e.current
			switch (e.current) {
				case '0':
					this.huichangBG = 'bg0'
					this.seatColl = 'chuangxin'
					break;
				case '1':
					this.huichangBG = 'bg1'
					this.seatColl = 'tuandui'
					break;
				case '2':
					this.huichangBG = 'bg2'
					this.seatColl = 'zhuanye'
					break;
				case '3':
					this.huichangBG = 'bg3'
					this.seatColl = 'zhunru'
					break;
				default:
					break;
			}
			/* 加载座位 */
			uniCloud.callFunction({
				name: 'seatLoad',
				data: {
					seatName: this.seatColl
				}
			}).then((res) => {

				this.seatData = res.result.data
				console.log(this.seatData)
				this.initData()
				uni.hideLoading()
			})
		},
		onShow() {

		},
		computed: {
			aPrice() {
				return this.SelectNum * 36
			},
			rpxNum() {
				return this.boxWidth / 750
			},
			pxNum() {
				return 750 / this.boxWidth
			},
			gouxuan() {
				switch (this.current) {
					case 0:
						return '#740099'
						break;
					case 1:
						return '#209cd9'
						break;
					case 2:
						return '#027c27'
						break;
					case 3:
						return '#ff6700'
						break;
					default:
						break;
				}
			}
		},
		methods: {
			bianshouChange(e) {
				this.bianshou = !this.bianshou
				/* console.log(e.detail.value[0])
				if (e.detail.value[0] == 1) {
					this.bianshou = true
					console.log('bianshou', this.bianshou)
				} else {
					this.bianshou = false
					console.log('bianshou', this.bianshou)
				} */
			},
			colorReturn(current) {
				switch (current) {
					case 0:
						return '#740099'
						break;
					case 1:
						return '#209cd9'
						break;
					case 2:
						return '#027c27'
						break;
					case 3:
						return '#ff6700'
						break;
					default:
						break;
				}
			},
			yingjifen() {
				uni.redirectTo({
					url: '../jifen/jifen'
				})
			},
			async yaoqing(seat) {
				uni.showLoading({
					title: '正在生成票据',
					mask: true
				})
				console.log('绘图current', this.current)
				const dp = await DrawPoster.build("canvas")
				let seatList = seat.split('#')
				dp.canvas.width = 668
				dp.canvas.height = 264
				dp.draw(async (ctx) => {
					await ctx.drawImage('/static/zhenying/' + this.current + '/piao.png', 0, 0, 668, 264);
				})
				dp.draw(async (ctx) => {
					ctx.textBaseline = "top";
					ctx.textAlign = "start";
					ctx.fillStyle = "#fff";
					ctx.font = 'normal 25px 微软雅黑';
					await ctx.fillText(seatList[1] + '排' + seatList[2] + '座', 502, 102);
				})
				const result = await dp.awaitCreate();
				console.log("draw绘制状况:", result);
				let posterImgUrl = await dp.createImagePath();
				console.log("绘制生成本地地址:", posterImgUrl);
				this.piaoSrc = posterImgUrl


				/* 上传图片 拿到存储地址 */
				uniCloud.uploadFile({
					filePath: this.piaoSrc,
					cloudPath: new Date().getTime() + '.png',
					onUploadProgress: function(progressEvent) {
						console.log(progressEvent);
						var percentCompleted = Math.round(
							(progressEvent.loaded * 100) / progressEvent.total
						);
					},
					success: (res) => {
						console.log(res)
						uni.setStorageSync('huichuanshuju', res.fileID)
						//拿下载地址
						uniCloud.getTempFileURL({
							fileList: [res.fileID]
						}).then((res) => {
							console.log('下载地址包', res)
							let downUrl = res.fileList[0].tempFileURL
							uni.setStorageSync('downUrl', res.fileList[0].tempFileURL)


							//更新到用户下
							uniCloud.callFunction({
								name: 'save-pic',
								data: {
									id: uni.getStorageSync('userID'),
									pic: downUrl
								}
							}).then((res) => {
								console.log(res)
								uni.hideLoading()
							})

						})



					}
				});




			},
			bgLine() {
				switch (this.current) {
					case '0':
						return 'bg0-line'
						break;
					default:
						break;
				}
			},
			fanhuihome() {
				uni.redirectTo({
					url: '../zixuanzhenying/zixuanzhenying'
				})
			},
			initData: function() {
				uni.getSystemInfo({
					success: (res) => {
						// console.log(res)
					}
				})
				let arr = this.seatData
				console.log(arr)
				//假数据说明：SeatCode座位编号，RowNum-行号，ColumnNum-纵号，YCoord-Y坐标，XCoord-X坐标，Status-状态
				let row = 0
				let col = 0
				let minCol = parseInt(arr[0].XCoord)
				let minRow = parseInt(arr[0].YCoord)
				for (let i of arr) {
					minRow = parseInt(i.YCoord) < minRow ? parseInt(i.YCoord) : minRow
					minCol = parseInt(i.XCoord) < minCol ? parseInt(i.XCoord) : minCol
					row = parseInt(i.YCoord) > row ? parseInt(i.YCoord) : row
					col = parseInt(i.XCoord) > col ? parseInt(i.XCoord) : col
				}
				this.seatList = arr
				this.seatRow = row - minRow + 1
				this.seatCol = col - minCol + 3
				this.minRow = minRow
				this.minCol = minCol - 1

				this.initSeatArray()
			},
			//初始座位数组
			initSeatArray: function() {
				let seatArray = Array(this.seatRow).fill(0).map(() => Array(this.seatCol).fill({
					type: -1,
					SeatCode: '',
					RowNum: '',
					ColumnNum: ''
				}));
				this.seatArray = seatArray
				this.seatSize = this.boxWidth > 0 ?
					parseInt(parseInt(this.boxWidth, 10) / (this.seatCol + 1), 10) :
					parseInt(parseInt(414, 10) / (this.seatCol + 1), 10)
				this.initNonSeatPlace();
			},
			//初始化是座位的地方
			initNonSeatPlace: function() {
				let seat = this.seatList.slice()
				let arr = this.seatArray.slice()
				for (let num in seat) {
					let status = 2 //-1为非座位，0为未购座位，1为已选座位(绿色),2为已购座位(红色)
					if (seat[num].Status === 0) {
						status = 0
					} else if (seat[num].Status === -1) {
						status = -1
					}
					arr[parseInt(seat[num].YCoord) - this.minRow][parseInt(seat[num].XCoord) - this.minCol] = {
						type: status,
						SeatCode: seat[num].SeatCode,
						RowNum: seat[num].RowNum,
						ColumnNum: seat[num].ColumnNum
					}
				}
				this.seatArray = arr.slice()
				let mArr = []
				for (let i in arr) {
					let m = ''
					for (let n of arr[i]) {
						if (n.SeatCode) {
							m = n.RowNum
						}
					}
					if (m) {
						mArr.push(m)
					} else {
						mArr.push('')
					}
				}
				this.mArr = mArr
			},
			//放大缩小事件
			onScale: function(e) {
				this.showTis = false
				// this.moveX=-e.detail.x
				let w = this.boxWidth * 0.5
				let s = 1 - e.detail.scale
				this.moveX = w * s
				this.scale = e.detail.scale
				if (s > 0 || s === 0) {
					this.showTis = true
				}
			},
			//移动事件
			onMove: function(e) {
				this.showTis = false
				this.moveX = e.detail.x
			},
			//重置座位
			resetSeat: function() {
				this.SelectNum = 0
				this.optArr = []
				//将所有已选座位的值变为0
				let oldArray = this.seatArray.slice();
				for (let i = 0; i < this.seatRow; i++) {
					for (let j = 0; j < this.seatCol; j++) {
						if (oldArray[i][j].type === 1) {
							oldArray[i][j].type = 0
						}
					}
				}
				this.seatArray = oldArray;
			},
			//选定且购买座位
			buySeat: function() {
				if (this.SelectNum === 0) {
					uni.showToast({
						title: '请选择座位',
						mask: true,
						icon: 'none'
					})
					return
				}
				uniCloud.callFunction({
					name: 'zhibo'
				}).then(res => {
					console.log(res.result.data[0].zhibo)
					if (res.result.data[0].zhibo == 1) {
						uni.showToast({
							title: '选座功能已关闭',
							mask: true,
							icon: 'none'
						})
						return false

					} else {
						// debugger
						let oldArray = [];
						for (let i = 0; i < this.seatRow; i++) {
							for (let j = 0; j < this.seatCol; j++) {
								if (this.seatArray[i][j].type === 1) {
									oldArray.push(this.seatArray[i][j].SeatCode)
								}
							}
						}
						console.log('座位ID', oldArray[0]) //座位ID
						console.log('推荐人', this.tuijianid) //推荐人
						console.log('会员信息', uni.getStorageSync('userID')) //会员信息
						// debugger
						uni.showLoading({
							mask: true,
							title: '正在提交···'
						})

						uniCloud.callFunction({
							name: 'seat-choose',
							data: {
								seatID: oldArray[0],
								huichang: this.huichangList[this.current],
								userInfo: uni.getStorageSync('userID'),
								tuijianid: this.tuijianid,
								bianshou: this.bianshou
							}
						}).then((res) => {
							uni.hideLoading()
							console.log(res)
							// debugger
							if (res.result.updated == 1) {
								let seat = res.result.seat
								//更新本地用户信息
								uni.showModal({
									content: '报名成功!',
									showCancel: false,
									success: (res) => {
										if (res.confirm) {
											this.yaoqing(seat)
											this.showPiao = true

										}
									}
								})






							} else {
								uni.showToast({
									icon: 'none',
									mask: true,
									title: res.result.msg
								})
							}
						}).catch((res) => {
							uni.hideLoading()
							console.log(res)
						})
					}

				})





			},
			//处理座位选择逻辑
			handleChooseSeat: function(row, col) {

				let seatValue = this.seatArray[row][col].type;
				let newArray = this.seatArray;
				//如果是已购座位，直接返回
				if (seatValue === 2 || seatValue === -1) return
				//如果是已选座位点击后变未选
				if (seatValue === 1) {
					newArray[row][col].type = 0
					this.SelectNum--
					this.getOptArr(newArray[row][col], 0)
				} else if (seatValue === 0) {
					this.resetSeat()
					newArray[row][col].type = 1
					this.SelectNum++
					this.getOptArr(newArray[row][col], 1)
				}
				//必须整体更新二维数组，Vue无法检测到数组某一项更新,必须slice复制一个数组才行
				this.seatArray = newArray.slice();

			},
			//处理已选座位数组
			getOptArr: function(item, type) {
				let optArr = this.optArr
				if (type === 1) {
					optArr.push(item)
				} else if (type === 0) {
					let arr = []
					optArr.forEach(v => {
						if (v.SeatCode !== item.SeatCode) {
							arr.push(v)
						}
					})
					optArr = arr
				}
				this.optArr = optArr.slice()

			},
			//推荐选座,参数是推荐座位数目，
			smartChoose: function(num) {
				console.log('num===', num)
				// 先重置
				this.resetSeat()
				//找到影院座位水平垂直中间位置的后一排
				let rowStart = parseInt((this.seatRow - 1) / 2, 10) + 1;
				//先从中间排往后排搜索
				let backResult = this.searchSeatByDirection(rowStart, this.seatRow - 1, num);
				if (backResult.length > 0) {
					this.chooseSeat(backResult);
					this.SelectNum += num
					return
				}
				//再从中间排往前排搜索
				let forwardResult = this.searchSeatByDirection(rowStart - 1, 0, num);
				if (forwardResult.length > 0) {
					this.chooseSeat(forwardResult);
					this.SelectNum += num
					return
				}
				//提示用户无合法位置可选
				alert('无合法位置可选!')

			},

			//搜索函数,参数:fromRow起始行，toRow终止行,num推荐座位数
			searchSeatByDirection: function(fromRow, toRow, num) {
				/*
				 * 推荐座位规则
				 * (1)初始状态从座位行数的一半处的后一排的中间开始向左右分别搜索，取离中间最近的，如果满足条件，
				 *    记录下该结果离座位中轴线的距离，后排搜索完成后取距离最小的那个结果座位最终结果，优先向后排进行搜索，
				 *    后排都没有才往前排搜，前排逻辑同上
				 *
				 * (2)只考虑并排且连续的座位，不能不在一排或者一排中间有分隔
				 *
				 * */

				/*
				 * 保存当前方向搜索结果的数组,元素是对象,result是结果数组，offset代表与中轴线的偏移距离
				 * {
				 *   result:Array([x,y])
				 *   offset:Number
				 * }
				 *
				 */
				let currentDirectionSearchResult = [];

				let largeRow = fromRow > toRow ? fromRow : toRow,
					smallRow = fromRow > toRow ? toRow : fromRow;

				for (let i = smallRow; i <= largeRow; i++) {
					//每一排的搜索,找出该排里中轴线最近的一组座位
					let tempRowResult = [],
						minDistanceToMidLine = Infinity;
					for (let j = 0; j <= this.seatCol - num; j++) {
						//如果有合法位置
						if (this.checkRowSeatContinusAndEmpty(i, j, j + num - 1)) {
							//计算该组位置距离中轴线的距离:该组位置的中间位置到中轴线的距离
							let resultMidPos = parseInt((j + num / 2), 10);
							let distance = Math.abs(parseInt(this.seatCol / 2) - resultMidPos);
							//如果距离较短则更新
							if (distance < minDistanceToMidLine) {
								minDistanceToMidLine = distance;
								//该行的最终结果
								tempRowResult = this.generateRowResult(i, j, j + num - 1)
							}
						}
					}
					//保存该行的最终结果
					currentDirectionSearchResult.push({
						result: tempRowResult,
						offset: minDistanceToMidLine
					})
				}

				//处理后排的搜索结果:找到距离中轴线最短的一个
				//注意这里的逻辑需要区分前后排，对于后排是从前往后，前排则是从后往前找
				let isBackDir = fromRow < toRow;
				let finalReuslt = [],
					minDistanceToMid = Infinity;
				if (isBackDir) {
					//后排情况,从前往后
					currentDirectionSearchResult.forEach((item) => {
						if (item.offset < minDistanceToMid) {
							finalReuslt = item.result;
							minDistanceToMid = item.offset;
						}
					});
				} else {
					//前排情况，从后往前找
					currentDirectionSearchResult.reverse().forEach((item) => {
						if (item.offset < minDistanceToMid) {
							finalReuslt = item.result;
							minDistanceToMid = item.offset;
						}
					})
				}

				//直接返回结果
				return finalReuslt
			},

			/*辅助函数，判断每一行座位从i列到j列是否全部空余且连续
			 *
			 */
			checkRowSeatContinusAndEmpty: function(rowNum, startPos, endPos) {
				let isValid = true;
				for (let i = startPos; i <= endPos; i++) {
					if (this.seatArray[rowNum][i].type !== 0) {
						isValid = false;
						break;
					}
				}
				return isValid
			},
			//辅助函数：返回每一行的某个合理位置的座位数组
			generateRowResult: function(row, startPos, endPos) {
				let result = [];
				for (let i = startPos; i <= endPos; i++) {
					result.push([row, i])
				}
				return result
			},
			//辅助函数:智能推荐的选座操作
			chooseSeat: function(result) {
				let opt = this.optArr
				let oldArray = this.seatArray.slice();
				for (let i = 0; i < result.length; i++) {
					//选定座位
					oldArray[result[i][0]][result[i][1]].type = 1
					this.optArr.push(oldArray[result[i][0]][result[i][1]])
				}
				this.seatArray = oldArray;
			},
		}
	}
</script>

<style scoped lang="scss">
	.w-100 {
		width: 100%;
		height: 100vh;
	}

	.bg0 {
		background: url(../../static/zhenying/0/xuanzuobg.jpg) no-repeat center top;
		background-size: 100%;
	}

	.bg1 {
		background: url(../../static/zhenying/1/xuanzuobg.jpg) no-repeat center top;
		background-size: 100%;
	}

	.bg2 {
		background: url(../../static/zhenying/2/xuanzuobg.jpg) no-repeat center top;
		background-size: 100%;
	}

	.bg3 {
		background: url(../../static/zhenying/3/xuanzuobg.jpg) no-repeat center top;
		background-size: 100%;
	}


	.p-all-10 {
		padding: 10rpx;
	}

	.ml-10 {
		margin-left: 10rpx;
	}

	.m-0-10 {
		margin: 0 10rpx;
	}

	.bg-unbtn {
		background-color: #f9abb3;
	}

	.bg-red-1 {
		background-color: #F45664;
	}

	.br-10 {
		border-radius: 10rpx;
	}

	.ml-20 {
		margin-left: 20rpx;
	}

	.mb-20 {
		margin-bottom: 20rpx;
	}

	.p-all-32 {
		padding: 32rpx;
	}

	.fd-cr {
		flex-direction: column-reverse;
		/* 主轴方向从下到上,默认从左到右 */
	}

	.bottom-bar {
		bottom: var(--window-bottom);
	}

	.color-fff {
		color: #fff
	}

	.br-15 {
		border-radius: 15rpx;
	}

	.over-h {
		overflow: hidden;
	}

	.dp-ib {
		display: inline-block;
	}

	.mt-20 {
		margin-top: 20rpx;
	}

	.pa-v-2 {
		/* 定位垂直对齐 */
		left: 50%;
		transform: translateX(-50%)
	}

	.b-d-1 {
		border: 1px dashed #e5e5e5;
	}

	.w-100 {
		width: 100%;
		/* display: flex;
			flex-direction: column;
			align-items: center; */
	}

	.h-100 {
		height: 100%;
	}

	.bg-f1 {
		// background-color: #5555ff;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.h-100vh {
		height: 100vh;
	}

	.pt-f {
		position: fixed;
	}

	.left-0 {
		left: 0;
	}

	.p-0-32 {
		padding: 0 32rpx;
	}

	.pt-20 {
		padding-top: 20rpx;
	}

	.bg-white {
		background-color: #fff;
	}

	.z1000 {
		z-index: 100;
	}

	.fz-34 {
		font-size: 34rpx;
	}

	.fw-b {
		font-weight: bold;
	}

	.mt-10 {
		margin-top: 10rpx;
	}

	.fz-28 {
		font-size: 28rpx;
	}

	.color-666 {
		color: #666666
	}

	.dp-f {
		display: flex;
	}

	.jc-c {
		justify-content: center;
	}

	.ai-c {
		align-items: center;
	}

	.fz-22 {
		font-size: 22rpx;
	}

	.color-333 {
		color: #333333
	}

	.m-0-a {
		margin: 0 auto;
	}

	.mt-48 {
		margin-top: 20rpx;
	}

	.fz-20 {
		font-size: 20rpx;
	}

	.color-999 {
		color: #fff;
		font-size: 40rpx;
		letter-spacing: 2px;
	}

	.b-1 {
		border: 1px solid #CCCCCC;
	}

	.br-5 {
		border-radius: 5rpx;
	}

	.Stage {
		background-color: #dddddd;
		width: 380rpx;
		height: 34rpx;
		transform: perspective(34rpx) rotateX(-10deg);
		margin: 0 auto;
	}

	.bg-line {
		background-color: rgba(0, 0, 0, 0.3);
	}

	.bg0-line {
		background: #740099;
	}

	.bg1-line {
		background: #209cd9;
	}

	.bg2-line {
		background: #027c27;
	}

	.bg3-line {
		background: #ff6700;
	}

	.cl0 {
		color: #740099;
	}

	.cl1 {
		color: #209cd9;
	}

	.cl2 {
		color: #027c27;
	}

	.cl3 {
		color: #ff6700;
	}

	.sel-seat {
		// background: url('/static/selected.png') center center no-repeat;
		background-size: 100% 100%;
	}

	.unsel-seat {
		// background: url('/static/unselected.png') center center no-repeat;
		background-size: 100% 100%;
	}

	.bought-seat {
		// background: url('/static/bought.png') center center no-repeat;
		background-size: 100% 100%;
	}

	.relate {
		position: relative;
	}

	.wutai {
		position: absolute;
		width: 200rpx;
		height: 300rpx;
		background: #007AFF;
		left: 50%;
		transform: translateX(-50%);
		top: 0;
	}

	.back-btn {
		width: 294rpx;
		height: 110rpx;
	}

	/* 座位说明 */
	.zuoweishuoming {
		width: 230rpx;
		height: 40rpx;
		// background: url(../../static/zuoweishuoming.png) no-repeat center center;
		background-size: 100%;

		margin: 0 auto;
		margin-top: 25rpx;
	}

	/* 分会场背景 */
	/* 融合共赢 */
	.bg1 {
		// background: url(../../static/1-bg.jpg) no-repeat center top;
		background-size: 100%;
	}

	.bg1xiao {
		// background: url(../../static/1-baoming-bg.png) no-repeat center top;
		background-size: 100%;
		margin-top: 22rpx;
	}

	.biaoti1 {
		width: 435rpx;
		height: 67rpx;
		margin-top: 170rpx;
		// background: url(../../static/1-biaoti.png) no-repeat center center;
		background-size: 100%;
	}

	.bg-unbtn-1 {
		background-color: #a3eab6;
	}

	.bg-btn-1 {
		background-color: #038732;
	}

	/* 个人成长 */
	.bg2 {
		// background: url(../../static/2-bg.jpg) no-repeat center top;
		background-size: 100%;
	}

	.bg2xiao {
		// background: url(../../static/2-baoming-bg.png) no-repeat center top;
		background-size: 100% auto;
		margin-top: 22rpx;
	}

	.biaoti2 {
		width: 436rpx;
		height: 67rpx;
		margin-top: 170rpx;
		// background: url(../../static/2-biaoti.png) no-repeat center center;
		background-size: 100%;
	}

	.bg-unbtn-2 {
		background-color: #ffd887;
	}

	.bg-btn-2 {
		background-color: #f2b951;
	}

	/* 高效团队 */
	.bg3 {
		// background: url(../../static/3-bg.jpg) no-repeat center top;
		background-size: 100%;
	}

	.bg3xiao {
		// background: url(../../static/3-baoming-bg.png) no-repeat center top;
		background-size: 100% auto;
		margin-top: 22rpx;
	}

	.biaoti3 {
		width: 436rpx;
		height: 67rpx;
		margin-top: 170rpx;
		// background: url(../../static/3-biaoti.png) no-repeat center center;
		background-size: 100%;
	}

	.bg-unbtn-3 {
		background-color: #95d5ff;
	}

	.bg-btn-3 {
		background-color: #1a47bd;
	}

	/* 业务赋能 */
	.bg4 {
		// background: url(../../static/4-bg.jpg) no-repeat center top;
		background-size: 100%;
	}

	.bg4xiao {
		// background: url(../../static/4-baoming-bg.png) no-repeat center top;
		background-size: 100% auto;
		margin-top: 22rpx;
	}

	.biaoti4 {
		width: 436rpx;
		height: 67rpx;
		margin-top: 170rpx;
		// background: url(../../static/4-biaoti.png) no-repeat center center;
		background-size: 100%;
	}

	.bg-unbtn-4 {
		background-color: #c4abe1;
	}

	.bg-btn-4 {
		background-color: #582489;
	}

	.zuoweishuoming1 {
		font-size: 20rpx;
		text-align: center;
		width: 100%;
		display: block;
		margin-top: 34rpx;
		color: #b2b2b2;
	}

	.mark {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background: rgba(0, 0, 0, .6);
		display: flex;
		flex-direction: column;
		align-items: center;
		z-index: 999;

		.jieguo {
			width: 538rpx;
			height: 478rpx;
			// background: url(../../static/baoming1.png) no-repeat center center;
			background-size: 100%;
			margin-top: 320rpx;
		}

		.fanhuimainbtn {
			width: 366rpx;
			height: 93rpx;
			// background: url(../../static/banckmain.png) no-repeat center center;
			background-size: 100%;
			margin-top: 126rpx;
		}
	}


	.huichang-bg {
		margin-top: 238rpx;
		background: #fff;
		height: 800rpx;
		padding-top: 50rpx;
		border-top-right-radius: 50rpx;
		border-top-left-radius: 50rpx;
	}

	.pic {
		width: 100%;
		height: 100%;
	}

	.piao-box {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: url(../../static/bg-piao.jpg) no-repeat center top;
		background-size: 100% auto;
		z-index: 999;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.canvas-hide {
		position: fixed;
		right: 100vw;
		bottom: 100vh;
		z-index: -9999;
		opacity: 0;
		letter-spacing: 5px;
	}

	.yaoqingpengyou {
		width: 566rpx;
		height: 124rpx;
		background: url(../../static/yaoqingpengyou.png) no-repeat center center;
		background-size: 100% 100%;
		margin-top: 32rpx;
	}

	.teshudingyi {
		margin-bottom: 16rpx;
	}

	.teshudingyi:nth-of-type(1) {
		margin-top: 10rpx;
	}

	.teshudingyi:nth-of-type(2) {
		margin-bottom: 20rpx;
	}

	.teshudingyi:nth-of-type(3) {
		margin-bottom: 20rpx;
	}

	.teshudingyi:nth-of-type(4) {
		margin-bottom: 20rpx;
	}

	.teshudingyi:nth-of-type(5) {
		margin-bottom: 0 !important;
	}

	.bianshou-box {
		margin: 0 auto;
		margin-top: 30rpx;
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		font-size: 13px;
	}

	.bianshou-bg {
		width: 316rpx;
		height: 60rpx;

	}

	.bianshou0 {
		background: url('@/static/bianshou0.png') no-repeat center center;
		background-size: 100% 100%;
	}

	.bianshou1 {
		background: url('@/static/bianshou1.png') no-repeat center center;
		background-size: 100% 100%;
	}
</style>
